import React from 'react';
import { Select, Slider, Space, Divider, Typography } from 'antd';

const { Text } = Typography;
const { Option } = Select as any;

interface SteppedOptions {
  mode: 'before' | 'after' | 'middle';
  borderWidth: number;
}

interface Props {
  visible: boolean;
  steppedOptions: SteppedOptions;
  setSteppedOptions: (opts: SteppedOptions) => void;
}

const SteppedLineControls: React.FC<Props> = ({ visible, steppedOptions, setSteppedOptions }) => {
  if (!visible) return null;
  return (
    <>
      <Divider type="vertical" />
      <Text type="secondary">阶梯样式</Text>
      <Space size={8}>
        <Select
          size="small"
          value={steppedOptions.mode}
          style={{ width: 60 }}
          onChange={(val) => setSteppedOptions({ ...steppedOptions, mode: val })}
        >
          <Option value="before">前</Option>
          <Option value="after">后</Option>
          <Option value="middle">中</Option>
        </Select>
        <Text type="secondary">线宽</Text>
        <div style={{ width: 80 }}>
          <Slider min={1} max={6} step={1}
            value={steppedOptions.borderWidth}
            onChange={(v: number) => setSteppedOptions({ ...steppedOptions, borderWidth: v })} />
        </div>
      </Space>
    </>
  );
};

export default SteppedLineControls;


